<template>
  <main>
    <div class="announcement">
      <!-- 搜索框 -->
      <el-input
          v-model="searchQuery"
          placeholder="请输入标题或编写人进行搜索"
          @input="searchAnnouncement"
          style="width: 300px; margin-bottom: 20px;"
          prefix-icon="el-icon-search"
      ></el-input>

      <!-- 发布公告按钮 -->
      <el-button @click="showPublishPage" type="primary" style="margin-bottom: 20px;margin-left: 20px;">编辑公告</el-button>

      <!-- 公告列表 -->
      <el-table :data="paginatedAnnouncements" style="width: 100%" stripe>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="author" label="编写人"></el-table-column>
        <el-table-column prop="date" label="提交时间" :formatter="formatDate"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="mini" @click="lookAnnouncement(row)">查看</el-button>
            <el-button size="mini" type="danger" @click="deleteAnnouncement(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="filteredAnnouncements.length"
          @current-change="handlePageChange"
          layout="total, prev, pager, next, jumper"
          style="margin-top: 20px;"
      ></el-pagination>

    </div>
    <div class="publishPage" @click="publishPage" v-if="isPublishPageVisible">
      <div class="write" @click.stop>
        <el-form :model="announcement" ref="form" label-width="80px" class="announcement-form">
          <h2>公告</h2>
          <el-form-item label="标题" prop="title" :rules="[ { required: true, message: '请输入公告标题', trigger: 'blur' } ]">
            <el-input v-model="announcement.title" placeholder="请输入公告标题"></el-input>
          </el-form-item>

          <el-form-item label="内容" prop="content" :rules="[ { required: true, message: '请输入公告内容', trigger: 'blur' } ]">
            <el-input type="textarea" rows="10" v-model="announcement.content" placeholder="请输入公告内容"></el-input>
          </el-form-item>

          <el-form-item label="编写人" prop="author" :rules="[ { required: true, message: '请输入编写人', trigger: 'blur' } ]">
            <el-input v-model="announcement.author" placeholder="请输入编写人"></el-input>
          </el-form-item>

          <div>
            <el-button v-if="!isLook" type="primary" @click="submitAnnouncement">发布公告</el-button>
            <el-button type="primary" @click="Cancel">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </main>

</template>

<script setup>
import {ref, computed, defineEmits} from 'vue';
import router from "@/router/index.js";

const isPublishPageVisible = ref(false);
const isLook=ref(false);
const searchQuery = ref('');
const currentPage = ref(1); // 当前页
const pageSize = ref(10); // 每页显示10条数据
// 初始化公告数据
const announcements = ref([
  { title: '关于公司年度大会的通知', content: '年度大会将于下月举行...', author: '张经理', date: new Date('2025-05-01T09:00:00') },
  { title: '员工福利发放通知', content: '公司将在下周发放福利...', author: '李总', date: new Date('2025-05-03T10:00:00') },
  { title: '项目组成员调整公告', content: '公司将进行成员调整...', author: '王主管', date: new Date('2025-05-04T11:00:00') },
  { title: '假期安排及注意事项', content: '五一假期期间部门轮休...', author: '赵助理', date: new Date('2025-05-05T08:30:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  { title: '部门绩效评估结果', content: '绩效评估已完成，报告发布...', author: '陈经理', date: new Date('2025-05-06T15:00:00') },
  // 更多公告
]);

// 过滤公告，根据标题或编写人进行筛选
const filteredAnnouncements = computed(() => {
  if (!searchQuery.value) {
    return announcements.value;
  }
  return announcements.value.filter(announcement => {
    return announcement.title.includes(searchQuery.value) || announcement.author.includes(searchQuery.value);
  });
});

// 当前页展示的公告数据
const paginatedAnnouncements = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredAnnouncements.value.slice(start, end);
});

// 分页变化时触发
const handlePageChange = (page) => {
  currentPage.value = page;
};

// 搜索时触发
const searchAnnouncement = () => {
  currentPage.value = 1; // 搜索时回到第一页
};

// 发布公告
const addAnnouncement = (announcement) => {
  announcements.value.unshift(announcement); // 新公告放到最前面
  isPublishPageVisible.value = false;
};

// 删除公告
const deleteAnnouncement = (announcement) => {
  announcements.value = announcements.value.filter(item => item !== announcement);
};

// 查看公告
const lookAnnouncement=(announcement)=>{
  announcement.islook = true; // 可根据需要展开编辑逻辑
  isLook.value=true;
  isPublishPageVisible.value=true;
}
const Cancel=()=>{
  announcement.islook = false; // 可根据需要展开编辑逻辑
  isLook.value=false;
  isPublishPageVisible.value=false;
}
const publishPage=()=>{
  announcement.islook = false; // 可根据需要展开编辑逻辑
  isLook.value=false;
  isPublishPageVisible.value=false;
}
// 格式化日期
const formatDate = (date) => {
  if (date instanceof Date) {
    console.log("时间输出正确");
    return date.toLocaleString(); // 将 Date 对象格式化为字符串
  }
  return date; // 如果不是 Date 对象，则直接返回原始值
};

// 显示发布公告对话框
const showPublishPage = () => {
  isPublishPageVisible.value = true;
};


const emit = defineEmits();
const announcement = ref({
  title: '',
  content: '',
  author: ''
});

const submitAnnouncement = () => {
  announcements.value.unshift(announcement.value); // 新公告放到最前面
  announcement.value={
    title: '',
    content: '',
    author: ''
  };
  isPublishPageVisible.value = false;
};
</script>

<style scoped>
main{
  position: relative;
  width: 100%;
  height: 100%;
  .announcement{
    width: 100%;
    height: 100%;
    float: left;
    .el-dialog {
      width: 60%;
    }
  }
  .publishPage{
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, .5);
    .write{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: auto;
      height: auto;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .announcement-form {
      width: 800px;
      height: auto;
      padding: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      h2{
        font-size: 30px;
        margin-bottom: 20px;
      }
      .el-form-item{
        width: 100%;
      }
    }
  }
}
</style>
